import Taro, {Component} from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {AtInput, AtTag} from 'taro-ui'
import {API_GOODS_HOT_WORDS} from '../../constants/api'
import fetch from '../../utils/request'
import './index.scss'

class Search extends Component {
  state = {
    keyword: '',
    storageKeyWords: [],
    hotWords: [
      // {id:1,name:'原单'},
      // {id:2,name:'椰子'},
      // {id:3,name:'情侣款'},
      // {id:4,name:'Chanel'},
    ]
  }

  async getHotWords() {
    let hotWords = await fetch({
      url: API_GOODS_HOT_WORDS,
      payload: {}
    })
    this.setState({
      hotWords
    })
  }

  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: '搜索'
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentDidShow() {
    this.getHotWords()
    try {
      let res = Taro.getStorageSync('keywords')
      this.setState({
        storageKeyWords: JSON.parse(res) || []
      })
    } catch (e) {
      this.setState({
        storageKeyWords: []
      })
    }
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  confirm(keyword) {
    let {storageKeyWords} = this.state
    if (!storageKeyWords.includes(keyword)) {
      Taro.setStorage({
        key: 'keywords',
        data: JSON.stringify([keyword, ...storageKeyWords])
      }).then(res => {

      }).catch(e => {
        console.log(e)
      })
    }
    Taro.navigateTo({
      url: `/pages/list/index?keyword=${keyword}&brandIds=${''}&cateIds=${''}&name=${keyword}`
    }).then(_ => {
      // this.setState({
      //   storageKeyWords:[keyword,...storageKeyWords]
      // })
      this.setState({
        keyword: ''
      })
    })
  }

  keywordChange(keyword) {
    this.setState({
      keyword
    })
  }

  cancel() {
    Taro.navigateTo({
      url: '/pages/tabs/index'
    })
  }

  clear() {
    try {
      Taro.removeStorageSync('keywords')
      this.setState({
        storageKeyWords: []
      })
    } catch (e) {
      Taro.showToast({
        title: '清除失败',
        icon: 'none'
      })
    }
  }

  render() {
    const {keyword, storageKeyWords, hotWords} = this.state
    return (
      <View className="search_page">
        <View className="search_tabbar">
          {/* <Input confirmType="search" value={keyword}
              onInput={this.inputChange.bind(this)}
              onConfirm={this.confirm.bind(this)}
              className="search_input">

              </Input> */}
          <AtInput
            confirmType="search"
            type='text'
            placeholder='搜索您感兴趣的'
            value={keyword}
            onChange={this.keywordChange.bind(this)}
            onConfirm={this.confirm.bind(this)}
            maxLength={-1}
          >
            <View className='at-icon at-icon-search'></View>
          </AtInput>

          <View className="search_cancel" onClick={this.cancel.bind(this)}>取消</View>
        </View>
        <View className="search_recent">
          <View className="search_recent_title">
            最近搜索
          </View>
          <View className="search_recent_clear" onClick={this.clear.bind(this)}>
            清除
          </View>
        </View>
        <View className="search_recent_tags">
          {
            storageKeyWords && storageKeyWords.slice(0, 10).map((tag) => (
              <AtTag
                size="normal"
                className="search_recent_tags-item"
                type='primary'
                active
                onClick={this.confirm.bind(this, tag)}
              >
                <Text decode>{tag}</Text>
              </AtTag>
            ))
          }
        </View>
        <View className="search_recent">
          <View className="search_recent_title">
            搜索推荐
          </View>
          <View className="search_recent_clear">

          </View>
        </View>
        <View className="search_recent_wrapper">
          {
            hotWords.map(item => (
              <Text className="search_recent_wrapper_item" key={item.id}
                    onClick={this.confirm.bind(this, item.name)} decode={true}>
                ·{item.name}
              </Text>
            ))
          }
        </View>
      </View>
    )
  }
}

export default Search
